{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PDF</title>
    <link rel="stylesheet" href="__PUBLIC__/dist/css/pdf_viewer.css">
    <link href="__PUBLIC__/dist/css/swiper.css" rel="stylesheet">
    <style>
        /* 导航 */

        body,
        html {
            padding: 0;
            margin: 0;
            background: #f1f1f1;
            height:100%;
        }
        section,
        div,
        ul {
            padding: 0;
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        .my-page {
            padding-top: 50px;
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .my-container {
            display: flex;
            align-items: center;
            height: 100%;
            padding-top:20px;
            padding-bottom:40px;
        }
       .swiper-container{
           flex:100% ;
           -webkit-box-flex:100%; 
       }
       /* .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{height:100%;} */
        .my-nav {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            padding: 5px;
            display: flex;
            align-items: center;
            align-items: center;
            z-index: 9999;
            background: #222;
        }

        .my-nav>.my-title {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            width: 300px;
            color: #fff;
            margin: auto;
            pointer-events: none;
            text-align: center;

        }

        .my-nav a {
            display: flex;
            color: #fff;
            width: 40px;
            height: 40px;
            justify-content: center;
            align-items: center;
            background: #333;
            cursor: pointer;
        }

        .pull-right {
            flex: 1;
            display: flex;
            padding-right: 10px;
            justify-content: flex-end;
        }

        .my-nav a:hover {
            background: #999;
        }

        .my-nav a:active {
            box-shadow: inset 0 0 3px 3px rgba(0, 0, 0, .3);
        }
        .swiper-wrapper{height:100%!important;}
        .swiper-slide {
            position: relative;
            text-align: center;
            overflow:auto;
        }
        .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{height:100%;}
        .swiper-slide>img {
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 0 2px 2px rgba(0, 0, 0, .3);
        }

        /* //zoom */

        .my-container[data-zoom="1"] .swiper-slide>img {
            width: 10%;
        }

        .my-container[data-zoom="2"] .swiper-slide>img {
            width: 20%;
        }

        .my-container[data-zoom="3"] .swiper-slide>img {
            width: 30%;
        }

        .my-container[data-zoom="4"] .swiper-slide>img {
            width: 40%;
        }

        .my-container[data-zoom="5"] .swiper-slide>img {
            width: 50%;
        }

        .my-container[data-zoom="6"] .swiper-slide>img {
            width: 60%;
        }

        .my-container[data-zoom="7"] .swiper-slide>img {
            width: 70%;
        }

        .my-container[data-zoom="8"] .swiper-slide>img {
            width: 80%;
        }

        .my-container[data-zoom="9"] .swiper-slide>img {
            width: 90%;
        }

        .my-container[data-zoom="10"] .swiper-slide>img {
            width: 100%;
        }

        .fixed-footer {
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.3);
            padding: 10px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <section id="myapp" class="my-page">
        <!-- nav -->
        <nav class='my-nav'>
            <h3 class="my-title"></h3>
            <a id="my-nav-prev">&lt;</a>
            <a id="my-nav-next">&gt;</a>
            <a id="my-nav-remove"> - </a>
            <a id="my-nav-add"> + </a>
            <div class='pull-right'>
                <a id="my-nav-full"> □ </a>
            </div>
        </nav>
        <!-- content -->
        <div class="my-container " data-zoom='9'>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                </div>
            </div>
        </div>
        <!-- 页脚 -->
        <div class="fixed-footer"></div>
    </section>
    <!-- 读取用 -->
    <div id="pageContainer" style="display:none"></div>
    <script src="__PUBLIC__/dist/js/pdf.min.js"></script>
    <script src="__PUBLIC__/dist/js/pdf_viewer.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script> -->
    <script src="__PUBLIC__/dist/js/swiper.min.js"></script>
    <script>
        'use strict';
        /**
         * @author 423822728@qq.com
        */

        //sw pdf config
        var config = {
            max: 10,
            min: 1,
            //图片质量
            qu: ("ontouchend" in document) ? .1 : 1,
        }
        //下一页
        document.querySelector("#my-nav-next").addEventListener("click", function () {
            sw.slideNext();

        })
        //上一页
        document.querySelector("#my-nav-prev").addEventListener("click", function () {
            sw.slidePrev();
        })
        //zoom
        var myapp = document.querySelector("#myapp");
        var mycontainer = document.querySelector(".my-container");
        //点击放大pdf
        document.querySelector("#my-nav-add").addEventListener("click", function () {
            var zoom = mycontainer.dataset.zoom;
            zoom++;
            zoom = Math.min(zoom, config.max);
            mycontainer.dataset.zoom = zoom;
            sw.update();
        })
        //点击缩小pdf
        document.querySelector("#my-nav-remove").addEventListener("click", function () {
            var zoom = mycontainer.dataset.zoom;
            zoom--;
            zoom = Math.max(zoom, config.min);
            mycontainer.dataset.zoom = zoom;
            sw.update();
        })
        //full
        document.querySelector("#my-nav-full").addEventListener("click", function () {
            //检测全屏对象
            if (lanchFullDom() == myapp) {
                //退出全屏  ie 下无效原因未知
                exitFullscreen();
            } else {
                //全屏
                lanchFullscreen(myapp);
            }

            // if (window.parent && window.parent.full) {
            //     window.parent.full(sw, window.location.href);
            // }
            sw.update();

        })
        //全屏时触发
        document.addEventListener('webkitfullscreenchange', function () {
            // mycontainer.innerHTML = swdom;
            // sw = new Swiper('.swiper-container', {
            //     //按键激活
            //     keyboardControl: true,
            //     setWrapperSize: true,
            // })
            // console.log(document.webkitFullscreenElement.clientWidth)
        })
        window.addEventListener("load",function(){
            if(window.innerWidth < 768){
                document.getElementById("myapp").style.width = window.innerWidth + "px";
                
                if(window.orientation != 0){
                    // 初始横屏时的状态
                    fullscreen();
                    document.querySelector(".my-container").dataset.zoom = 5;
                    setTimeout(function(){
                        document.getElementById("myapp").style.width = window.parent.document.body.clientWidth + "px";
                        sw.update();
                    },200)
                }
            }
        })
        // 横屏
        window.addEventListener("orientationchange", function() {
            if(window.orientation != 0 ){
                fullscreen();
                document.querySelector(".my-container").dataset.zoom = 5;
            }else{
                window.parent.document.body.parentElement.classList.remove("o-hidden");
                window.parent.document.getElementById("videosrc").classList.remove("fullscreen");
                setTimeout(function(){
                    window.parent.document.getElementById("videosrc").style.height = window.parent.innerHeight - 97 + "px";
                    window.parent.document.getElementById("videosrc").style.maxHeight = window.parent.innerHeight - 97 + "px";
                    document.querySelector(".my-container").dataset.zoom = 9;
                },200)
            }
            setTimeout(function(){
                document.getElementById("myapp").style.width = window.parent.document.body.clientWidth + "px";
                sw.update();
            },200)
         }, false);

        //get full dom
        function lanchFullDom() {
            var el = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement || null;

            return el

        }
        function lanchFullscreen(element) {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            }
            else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            }
            else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
            else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullScreen();
            }else{
                fullscreen();
            }
        }

        function fullscreen(){
            // iframe   处理意外全屏 - 手机无法全屏 / 退出全屏也在这里处理
            if( !window.parent.document.getElementById("videosrc").classList.contains("fullscreen") ){
                // 未添加全屏class
                window.parent.document.body.parentElement.classList.add("o-hidden");
                window.parent.document.getElementById("videosrc").classList.add("fullscreen");
                window.parent.document.getElementById("videosrc").style.height = window.parent.innerHeight + "px";
                setTimeout(function(){
                    sw.update();
                },1)
            }else{
                // 已添加
                window.parent.document.body.parentElement.classList.remove("o-hidden");
                window.parent.document.getElementById("videosrc").classList.remove("fullscreen");
                setTimeout(function(){
                    window.parent.document.getElementById("videosrc").style.height = window.parent.innerHeight - 97 + "px";
                    window.parent.document.getElementById("videosrc").style.maxHeight = window.parent.innerHeight - 97 + "px";
                    sw.update();
                },1)
            }
        }

        //退出全屏
        function exitFullscreen() {
            if (document.exitFullscreen) {
                //html5
                document.exitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                //ff
                document.mozCancelFullScreen();
            }
            else if (document.msExitFullscreen) {
                //ie
                document.msExiFullscreen();
            }
            else if (document.webkitCancelFullScreen) {
                //webkit
                document.webkitCancelFullScreen();
            }
        }

        //PDF read

        // PDFJS.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.9.640/pdf.worker.min.js';
        // var host = "http://wpt.wei580.com/";
        //pdf url
        // var DEFAULT_URL = "__PUBLIC__/Images/pdf.pdf";//demo
        var DEFAULT_URL = "{$url}";
        console.log(DEFAULT_URL)

        //按照比例 生成图片
        var DEFAULT_SCALE = .8;

        //read pdf container
        var container = document.getElementById('pageContainer');

        //获得标题
        var title = "{$title}";
        //var title = PDFJS.getFilenameFromUrl(DEFAULT_URL);
        //decodeURI(title) 反序列化
        document.title = decodeURI(title);
        //swiper
        var sw = '';

        // Fetch the PDF document from the URL using promises.
        PDFJS.getDocument(DEFAULT_URL).then(function (doc) {

            var swobj = document.querySelector(".swiper-wrapper");

            for (var i = 0; i < doc.numPages; i++) {
                var cell = document.createElement("div");
                cell.className = "swiper-slide cell" + i;
                swobj.appendChild(cell);
            }
            //init sw
            function setPageNo(sw) {
                // go to swiper index
                var go = sw.activeIndex + 1;
                document.querySelector(".fixed-footer").innerHTML = go + "/" + doc.numPages;
            }
            // sw = new Swiper('.swiper-container', {
            //     //按键激活
            //     keyboardControl: true,
            //     //flex 
            //     setWrapperSize: true,
            //     //高度随内容变化
            //     autoHeight: true,
            //     // height: window.innerHeight
            //     onInit: setPageNo,
            //     onTransitionStart: setPageNo
            // })
            //return swiper object to iframe win
            if (window.parent && window.parent.keyFn) {
                window.parent.keyFn(sw);
            }

            // Use a promise to fetch and render the next page.

            loadImage(1);

            function loadImage(pageNum) {

                return doc.getPage(pageNum).then(function (pdfPage) {

                    // Create the page view.
                    var pdfPageView = new PDFJS.PDFPageView({
                        container: container,
                        id: pageNum,
                        scale: DEFAULT_SCALE,
                        defaultViewport: pdfPage.getViewport(DEFAULT_SCALE),
                        annotationLayerFactory: new PDFJS.DefaultAnnotationLayerFactory(),
                        renderInteractiveForms: true,
                    });

                    // 网页视图绘制
                    pdfPageView.setPdfPage(pdfPage);

                    //绘制canvans
                    pdfPageView.draw().then(function (d) {
                        var obj = document.querySelector("[data-page-number='" + pageNum + "']");

                        var canvas = obj.querySelector("canvas");
                        // 画质太高会影响加载速度，手机端可能会崩
                        var src = canvas.toDataURL("image/jpeg", config.qu)
                        //获得base64地址 add到页面上
                        var img = new Image();
                        img.src = src;


                        //join container
                        var cellStr = ".cell" + (pageNum - 1);
                        var cell = document.querySelector(cellStr);
                        cell.appendChild(img);
                        //加载中
                        if (pageNum == 1) {
                            sw = new Swiper('.swiper-container', {
                                //按键激活
                                keyboardControl: true,
                                //flex 
                                setWrapperSize: true,
                                //高度随内容变化
                                autoHeight: true,
                                // height: window.innerHeight,
                                onInit: setPageNo,
                                onTransitionStart: setPageNo
                            })
                        }

                        // document.querySelector(".fixed-footer").innerHTML = pageNum + "/" + doc.numPages;

                        if (pageNum < doc.numPages) {
                            // next page

                            loadImage(pageNum + 1)
                        } else {

                            return;
                        }
                    });
                });


            }
        });

    </script>
</body>

</html>